<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/15
  Time: 9:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
    <meta charset="UTF-8">
    <title>秒杀页面</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/generalMerchandise.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/seckillhome.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/layui/css/layui.css">

    <style>
        * {
            margin: 0;
            padding: 0;
            user-select: none;
        }

        .layui-tab-title {
            height: 60px;
            left: -5px;
        }

        .layui-tab-title li {

            width: 200px;
            background-color: white;
            line-height: 60px;
            transition: none;
            -webkit-transition: none;
        }

        .layui-tab-title div {
            font-style: normal;
            font-weight: 700;
            text-align: center;
            float: left;
            font-size: 14px;
            /*margin: 0 20px;*/
            /*position: absolute;*/

        }

        .layui-tab-title .layui-this {
            font-size: 14px;

            color: white;
            width: 240px;
            /*height: 50px;*/
            margin: 0 auto;
            background-color: #E01222;
            font-weight: bold;
        }

        .layui-tab-title .layui-this .timetext {
            font-size: 20px;
            font-weight: 700;
        }

        .layui-this .timetext {
            margin-left: 25px;
            /*width: 80px;*/
            overflow: hidden;
            display: inline-block;
        }

        .timetext {
            margin-left: 25px;

        }

        .downtime {
            width: 110px;
            padding: 10px 0;
            line-height: 20px;
            /*float: right;*/
        }

        .layui-tab-title .layui-this:after {
            border: none;
        }

        .time-choose {
            /*border: solid 1px black;*/
        }

        .tiptext {
            border: 1px solid #666;
            padding: 0 14px;
            vertical-align: middle;
            height: 26px;
            line-height: 25px;
            color: #666;
            -moz-border-radius: 22px;
            border-radius: 22px;
            font-size: 12px;
            display: inline-block;
            margin-left: 10px;

            /*transform: skewX(0deg);*/

        }

        .time-tab {
            margin: 0 200px;
            z-index: 999;
            left: -30px;
        }

        .changetab {
            transform: skewX(-45deg);
        }

        .changediv {
            transform: skewX(45deg);
        }

        /*.intocarrrton {*/
        /*    transition: all 2s;*/
        /*    -webkit-transition: all 2s;*/
        /*}*/
        .wait {
            background-color: #333333;
            color: #f8f8f8;
        }
        .seckill_mod_goods_info_i:hover {
            color: #fff;
            background: #e03340;
        }
    </style>

</head>

<body>

<!--最上面的导航-->
<jsp:include page="../common/header.jsp" flush="true"/>
<!--主体部分 -- 头部导航下面盒子：logo + 搜索 + 购物车 -->
<jsp:include page="../common/search_cart.jsp" flush="true"/>



<div class="skmu J_menu" id="skmu">
    <div class="grid_c1">

        <div class="skmu_list">
            <ul class="skmu_list_cnt">
                <li class="skmu_list_item skmu_list_item_on"><a href="" title="树懒秒杀">树懒秒杀</a>
                <li class="skmu_list_item "><a href="" title="品类秒杀">品类秒杀</a>
            </ul>
        </div>
    </div>
</div>


<div class="seckill_container">
    <div class="seckill_container_bg"></div>
    <div class="skhd" id="skhd" data-id="skhd" data-tpl="seckillheader_tpl">
        <div class="skhd_wrap">
            <div class="grid_c1">
                <h3 class="skhd_tit"></h3>
            </div>
            <div class="skhd_bg"></div>
        </div>
    </div>


    <div class="time-tab">
        <ul class="layui-tab-title">
            <li class="time-choose layui-this" id="time-now">
                <div class="timetext"></div>
                <div class="tip"><i class="tiptext">即将开始</i></div>
                <div class="downtime">
                    <span class="doing"></span>
                    <br>
                    <span class="range"></span><span class="_h">00</span><span class="_m">00</span><span
                        class="_s">00</span>
                </div>
            </li>
            <li class="time-choose" id="time-second">
                <div class="timetext"></div>
                <div class="tip"><i class="tiptext">即将开始</i></div>
                <div class="downtime">
                    <span class="doing">即将开始</span>
                    <br>
                    <span>距开始</span><span class="_h">00</span><span class="_m">00</span><span class="_s">00</span>
                </div>
            </li>
            <li class="time-choose" id="time-third">
                <div class="timetext"></div>
                <div class="tip"><i class="tiptext">即将开始</i></div>
                <div class="downtime">
                    <span class="doing">即将开始</span>
                    <br>

                    <span>距开始</span><span class="_h">00</span><span class="_m">00</span><span class="_s">00</span>
                </div>
            </li>
            <li class="time-choose" id="time-fourth">
                <div class="timetext"></div>
                <div class="tip"><i class="tiptext">即将开始</i></div>
                <div class="downtime">
                    <span class="doing">即将开始</span>
                    <br>

                    <span>距开始</span><span class="_h">00</span><span class="_m">00</span><span class="_s">00</span>
                </div>
            </li>
            <li class="time-choose" id="time-fifth">
                <div class="timetext"></div>
                <div class="tip"><i class="tiptext">即将开始</i></div>
                <div class="downtime">
                    <span class="doing">即将开始</span>
                    <br>
                    <span>距开始</span><span class="_h">00</span><span class="_m">00</span><span class="_s">00</span>
                </div>
            </li>
        </ul>

    </div>
    <div class="skwrap">
        <div class="spsk" id="super_seckill">
            <!--商品列表-->
            <!--秒杀单品-->
            <div class="grid_c1">
                <div id="container">
                    <ul class="seckill_mod_goodslist">
                    </ul>
                </div>
            </div>

        </div>
    </div>
</div>
<%--</div>--%>


<!--下方提示信息-->
<div id="cmsfooter">
    <div id="service-2017">

        <!-- 多快好省 -->
        <div class="w hhzidingyi">
            <ol class="slogen">
                <li class="item ">
                    <i>多</i>
                    品类齐全，轻松购物

                <li class="item fore2">
                    <i>多</i>
                    多仓发货，极速配送

                <li class="item fore3">
                    <i>好</i>
                    正品行货，精致服务

                <li class="item fore4">
                    <i>省</i>
                    天天低价，畅选无忧

            </ol>
        </div>

        <!--下面的信息-->
        <div class="shulan-help">
            <div class="w hhzidingyi">
                <div class="tishixinxi">
                    <span class="zititishixinxi">欢迎使用树懒商城，为您提供高质量的服务，是我们商城最高的追求！</span>
                </div>
            </div>
        </div>


    </div>
</div>

<script src="${pageContext.request.contextPath}/res/layui/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/res/jquery/jquery-3.5.1.js"></script>
<script>
    var hourarr = new Array(8, 10, 12, 14, 16, 18, 20, 22);
    var arr = new Array("08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00", "明日08:00", "明日10:00", "明日12:00", "明日14:00");
    var index = 0;

    var oTop = $(".time-tab").offset().top;
    var sTop = 0;

    $(document).ready(function () {

        $(".downtime").hide();
        $(".layui-this").children('div.downtime').show();
        $(".layui-this").children('div.tip').hide();

        $(".layui-tab-title").addClass("changetab");
        $(".time-choose").children().addClass("changediv");


        $("p").append(" <b>Hello world!</b>");


        var date = new Date();
        var hour = date.getHours();
        for (; index < 8; index++) {
            if (hourarr[index] + 2 > hour) {
                break;
            }
        }
        if (index == 8) {
            index = 0;
        }

        $("#time-now").children('div.timetext').text(arr[index]);
        $("#time-second").children('div.timetext').text(arr[index + 1]);
        $("#time-third").children('div.timetext').text(arr[index + 2]);
        $("#time-fourth").children('div.timetext').text(arr[index + 3]);
        $("#time-fifth").children('div.timetext').text(arr[index + 4]);

        getdouw(0);

    });

    var h = $(".layui-tab-title")[0].offsetTop;


    $(".time-choose").click(function () {


        console.log(h);

        // console.log(h)
        $("html,body").animate({scrollTop: h}, 800);//点击按钮向下移动800px，时间为800毫秒


        var flag = $(".time-choose").index(this);

        // console.log("第"+diji);
        $(".downtime").hide();
        $('.tip').show();
        $(this).children('div.tip').hide();
        $(".time-choose").removeClass('layui-this');

        $(this).addClass('layui-this');


        $(".layui-this").children('div.downtime').show();
        //设置截止时间
        getdouw(flag);

    });

    function getdouw(flag) {

        var begin = new Date();  //当前日期

        nowday = begin.getFullYear() + "/" + (begin.getMonth() + 1) + "/" + begin.getDate();

        var time = (new Date).getTime() + 24 * 60 * 60 * 1000;

        var tomorrow = new Date(time);//前一天

        tomorrow = tomorrow.getFullYear() + "/" + (tomorrow.getMonth() + 1) + "/" + tomorrow.getDate();


        if (index + flag > 7) {
            var str = tomorrow + ' ' + arr[index + flag - 8] + ':00';
        } else {
            var str = nowday + ' ' + arr[index + flag] + ':00';
        }

        console.log(str);

        $(".seckill_mod_goodslist").empty();
        $.ajax({
            type: "GET",
            url: "${pageContext.request.contextPath}/seckill",
            dataType: 'json',
            data: {starttime: str},//也可以是字符串链接"id=1001"，建议用对象
            success: function (result) {
                console.log("返回result的数据: " + JSON.stringify(result));
                var seckillList = result.data;
                console.log("shopArray.length：" + seckillList);
                for (var i = 0; i < seckillList.length; i++) {
                    var liEle = '                    <li class="seckill_mod_goods">\n' +
                        '                        <a href="${pageContext.request.contextPath}/product/' + seckillList[i].proId + '" target="_blank"\n' +
                        '                           class="seckill_mod_goods_link">\n' +
                        '                            <img class="seckill_mod_goods_link_img"\n' +
                        '                                 src="' + seckillList[i].secImgPath + '">\n' +
                        '                            <p class="seckill_mod_goods_title">' + seckillList[i].others1 + '</p>\n' +
                        '                            <p class="seckill_mod_goods_desc">' + seckillList[i].others2 + '</p>\n' +
                        '                        </a>\n' +
                        '                        <div class="seckill_mod_goods_info">\n' +
                        '                                <span class="seckill_mod_goods_info_txt">\n' +
                        '                                    <span class="seckill_mod_goods_price">\n' +
                        '                                        <i class="seckill_mod_goods_price_now"><em>¥</em>' + seckillList[i].secPrice + '</i>\n' +
                        '                                        <span class="seckill_mod_goods_price_pre">¥<del>' + seckillList[i].proPrice + '</del></span>\n' +
                        '                                    </span>\n' +
                        '                                    <span class="seckill_mod_goods_progress">\n' +
                        '                                        <i class="seckill_mod_goods_progress_txt">已售' + toPercent((seckillList[i].secSell-seckillList[i].secStock) / seckillList[i].secSell) + '</i>\n' +
                        '                                        <i class="seckill_mod_goods_progress_inner">' +
                        '                                               <b class="seckill_mod_goods_progress_completed" style="width:' + toPercent((seckillList[i].secSell-seckillList[i].secStock) / seckillList[i].secSell) + '"></b>\n' +
                        '                                        </i>\n' +
                        '                                    </span>\n' +
                        '                                </span>\n' +
                        '                            <a href="${pageContext.request.contextPath}/product/'+seckillList[i].proId+'" target="_blank"\n';
                    if (flag == 0) {
                        liEle += '                               class="seckill_mod_goods_info_i">立即抢购\n';
                    } else {
                        liEle += '                               class="seckill_mod_goods_info_i wait">即将开始\n';
                    }
                    liEle += '                            </a>\n' +
                        '                        </div>\n' +
                        '                    </li>\n';
                    $(".seckill_mod_goodslist").append(liEle);
                }
            }
        });

        // var str = "2021/10/29 12:00:00";

        var endDate = new Date(str);
        var over = endDate.getTime();

        var now = begin.getTime();
        if (over > now) {
            countTime(over);
        } else {
            $(".layui-this").children('div.downtime').children('span.doing').text("正在秒杀");
            $(".layui-this").children('div.tip').children('i.tiptext').text("进行中");
            $(".layui-this").children('div.downtime').children('span.range').text("距结束");
            countTime(over + 2 * 60 * 60 * 1000);
        }
    }


    var end = 0;

    function countTime(endtime) {

        if (endtime != null) {
            end = endtime;
        }

        // var testDateStr = "2021/10/29 16:00";
        // var testendDate = new Date(testDateStr);
        // var testover = testendDate.getTime();
        // end=testover;


        //获取当前时间
        var date = new Date();
        var now = date.getTime();


        //时间差
        var leftTime = end - now;

        if (leftTime<0){
            alert("已经结束了");
            location.href="${pageContext.request.contextPath}/product/seckillhome.jsp";
        }

        //定义变量 d,h,m,s保存倒计时的时间
        var d, h, m, s;
        if (leftTime >= 0) {
            h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
            m = Math.floor(leftTime / 1000 / 60 % 60);
            s = Math.floor(leftTime / 1000 % 60);
        }
        //将倒计时赋值到div中
        if (h < 10) {
            $("._h").text("0" + h + ":")
            // document.getElementById("_h").innerHTML = "0" + h + ":";

        } else {
            $("._h").text(h + ":");

        }
        if (m < 10) {
            $("._m").text("0" + m + ":");

        } else {
            $("._m").text(m + ":");

        }
        if (s < 10) {
            $("._s").text("0" + s);

        } else {
            $("._s").text(s);

        }
        //递归每秒调用countTime方法，显示动态时间效果
        setTimeout(countTime, 1000);

    }


    // var oInfo = $(".info");

    $(window).scroll(function () {

        sTop = $(this).scrollTop();
        // console.log(sTop + '-' + oTop);//这一句 只是为了看看数据 没有多大的用处
        if (sTop >= oTop - 1) {
            $(".time-tab").css({"position": "fixed", "top": "0"});


            $(".layui-tab-title").removeClass("changetab");
            $(".time-choose").children().removeClass("changediv");

            $(".time-tab").addClass("intocarrrton");
            // $(".layui-tab-title").children("div").addClass("changediv");

            $(".skwrap").css('top', 60);


        } else {
            $(".time-tab").css({"position": "static"});
            $(".layui-tab-title").addClass("changetab");
            $(".time-choose").children().addClass("changediv");
            $(".time-tab").removeClass("intocarrrton");
            $(".skwrap").css('top', 0);


        }
    });

    function toPercent(point) {
        var str = Number(point * 100).toFixed(0);
        str += "%";
        return str;
    }
</script>


</body>
</html>







